<template>
    <div>
        <div class="queryBox">
            <div class="row">
                <div class="left">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>
                        筛选搜索
                    </span>
                </div>
                <div class="right">
                    <el-button @click="roleReset">重置</el-button>
                    <el-button type="primary" @click="queryUserList">搜索</el-button>
                </div>
            </div>
            <div class="row">
                <span>账号/姓名：</span>
                <el-input v-model="queryParams.keyword" placeholder="输入账号/姓名搜索" />
            </div>
        </div>
    </div>
    <div class="editUser">
        <div class="editUserLeft">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <div class="editUserRight">
            <el-button type="primary" @click="showDialog = true" v-permission="'addUser'">添加</el-button>
        </div>
    </div>
    <el-table :data="userList" style="width: 100%" border>
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="nickName" label="姓名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="createTime" label="添加时间">
            <template #default="{ row }">
                <span>{{ formateDate(row.createTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="loginTime" label="最后登录">
            <template #default="{ row }">
                <span>{{ formateDate(row.loginTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column #default="{ row }" label="是否启用">
            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="switchStatus(row)" />
        </el-table-column>>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button text type="primary" @click="showAllocRoleDialog(row.id)"
                    v-permission="'allocRole'">分配角色</el-button>
                <el-button text type="primary" @click="editUSer(row.id)" v-permission="'editUser'">编辑</el-button>
            </template>
        </el-table-column>>
    </el-table>
    <div class="page">
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="queryUserList" @current-change="queryUserList" />
        </ElConfigProvider>
    </div>
    <UserEdit :show="showDialog" @hide="closeDialog" :id="editId" />
    <AllocRole :show="showAllocRole" @hide="closeAllocRoleDialog" :id="allocId" />
</template>
<script setup lang='ts'>
import { ref, reactive } from "vue";
import { userListAPI, userStatusAPI } from "./api";
import { Search, Tickets } from '@element-plus/icons-vue'
import { ElConfigProvider, ElMessage } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { formateDate } from "@/utils";
import UserEdit from "./editUser.vue";
import AllocRole from "./allocRole.vue";
const userList = ref<IList[]>([])

const queryParams = reactive<IUserListParams>({
    keyword: '',
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const queryUserList = () => {
    userListAPI(queryParams).then((res) => {
        if (res.code === 200) {
            userList.value = res.data.list
            total.value = res.data.total

        }
    })
}
queryUserList()
const roleReset = () => {
    queryParams.keyword = ""
    queryUserList()
}
const switchStatus = (row: IList) => {
    userStatusAPI(row.id!, row.status).then(res => {
        if (res.code === 200) {
            ElMessage.success("切换成功")
        } else {
            row.status = row.status === 1 ? 0 : 1
        }
    }).catch(() => {
        row.status = row.status === 1 ? 0 : 1
    })
}

const showDialog = ref(false);
const closeDialog = (isReload?: boolean) => {
    showDialog.value = false;
    editId.value = 0
    if (isReload) queryUserList();

};
const editId = ref(0)
const editUSer = (id: number) => {
    editId.value = id
    showDialog.value = true;
}

const showAllocRole = ref(false);
const allocId = ref(0)
const showAllocRoleDialog = (id: number) => {
    showAllocRole.value = true
    allocId.value = id
}
const closeAllocRoleDialog = () => {
    showAllocRole.value = false
    allocId.value = 0
};
</script>
<style lang="less" scoped>
.queryBox {
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;

    .row {
        display: flex;
        padding: 10px 0;

        &:first-child {
            justify-content: space-between;
            align-items: center;
        }

        &:last-child {
            width: 400px;
            align-items: center;

            span {
                font-size: 12px;
                width: 100px;
            }
        }
    }
}

.editUser {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    align-items: center;
}

.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>